<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Canvas练手</title>
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/bootstrap-slider.css">
    <link rel="stylesheet" href="./mycss.css">
</head>

<body>
    <a href="https://www.runoob.com/html/html5-canvas.html" style="text-decoration: none;">HTML5 Canvas</a> &nbsp;
    &nbsp; &nbsp; &nbsp;
    <a href="https://www.runoob.com/w3cnote/html5-canvas-intro.html" style="text-decoration: none;">学习 HTML5 Canvas
        这一篇文章就够了</a>&nbsp;&nbsp; &nbsp; &nbsp;
    <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Basic_usage"
        style="text-decoration: none;">MDN</a>&nbsp;&nbsp; &nbsp; &nbsp;
    <a href="http://seiyria.com/bootstrap-slider/" style="text-decoration: none;">进度条-可拖动</a>
    <hr>

    <h3>实践到--使用图片---对应网站为：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Using_images</h3>

    <div class="cancaitl">
        <div class="canvas">
            <canvas id="myCanvsa" ondblclick="clearRect(0, 0, 800, 600)" width="800px" height="400px">
                current stock price: $3.15 +0.15 这里是可替换内容（当浏览器不支持canvas时）
            </canvas>
        </div>
        <div class="tool">
            <div class="toolClass">
                <button onclick="fillRect(10, 30, 101, 102)">填充矩形</button>
            </div>
            <div class="toolClass">
                <button onclick="clearRect(10, 30, 101, 102)">清除矩形</button>
            </div>
            <div class="toolClass">
                <button onclick="strokeRect(50, 40, 91, 32)">非填矩形</button>
            </div>
            <div class="toolClass">
                <button onclick="clearRect(50, 40, 91, 32)">清除矩形</button>
            </div>
            <div class="toolClass">
                <button onclick="clearRect(0, 0, 800, 600)">清除所有</button>
            </div>
            <div class="fg"></div>
            <div class="toolClass">
                <button onclick="arc1()">圆弧路径</button>
            </div>
            <div class="toolClass">
                <button onclick="arc2()">画个笑脸</button>
            </div>
            <div class="fg"></div>
            <div class="toolClass">
                <button onclick="quadraticCurveTo()">贝塞尔曲线2</button>
            </div>
            <div class="toolClass">
                <button onclick="bezierCurveTo()" ondblclick="bezierCurveTo2()">贝塞尔曲线3</button>
            </div>
            <div class="fg"></div>
            <div class="toolClass">
                <button onclick="zuhe()">组合使用</button>
            </div>
            <div class="fg"></div>
            <div class="toolClass">
                <button onclick="path2D_()">使用Path2D</button>
            </div>
            <div class="fg"></div>
            <div class="toolClass2">
                <div class="clear" onclick="color()">填充颜色</div>
                <div class="clear">
                    <input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="111111"
                        data-slider-max="999999" data-slider-step="2" data-slider-value="234114" />
                </div>
            </div>
            <div class="toolClass2">
                <div class="clear" onclick="color2()">画笔颜色</div>
                <div class="clear">
                    <input id="ex2" data-slider-id='ex1Slider' type="text" data-slider-min="111111"
                        data-slider-max="999999" data-slider-step="2" data-slider-value="121414" />
                </div>
            </div>
            <div class="toolClass2">
                <div class="clear" onclick="globalAlpha()">透明度</div>
                <div class="clear">
                    <input id="globalAlpha" data-slider-id='ex1Slider' type="text" data-slider-min="0"
                        data-slider-max="1" data-slider-step="0.1" data-slider-value="0.5" />
                </div>
            </div>
            <div class="toolClass2">
                <div class="clear" onclick="width()">线段宽度</div>
                <div class="clear">
                    <input id="width" data-slider-id='ex1Slider' type="text" data-slider-min="1" data-slider-max="100"
                        data-slider-step="1" data-slider-value="1" />
                </div>
            </div>
            <div class="toolClass2">
                <div class="clear" onclick="lineCap()">线段末尾样式</div>
                <div class="clear">
                    <input id="lineCap" data-slider-id='ex1Slider' type="text" data-slider-min="1" data-slider-max="3"
                        data-slider-step="1" data-slider-value="1" />
                </div>
            </div>
            <div class="toolClass2">
                <div class="clear" onclick="lineJoin()">线段折角类型</div>
                <div class="clear">
                    <input id="lineJoin" data-slider-id='ex1Slider' type="text" data-slider-min="1" data-slider-max="3"
                        data-slider-step="1" data-slider-value="1" />
                </div>
            </div>
            <div class="toolClass2">
                <div class="clear" onclick="lineDash()">线段样式</div>
                <div class="clear">
                    <input id="lineDash" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="3"
                        data-slider-step="1" data-slider-value="0" />
                </div>
            </div>
            <div class="toolClass2">
                <div class="clear" onclick="gradients(200, 1)">渐变-矩形(圆型略)</div>
                <div class="clear">
                    <input id="stop" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="200"
                        data-slider-step="1" data-slider-value="30" />
                </div>
                <div class="clear">
                    <input id="offset" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="1"
                        data-slider-step="0.1" data-slider-value="1" />
                </div>
            </div>
            <div class="toolClass2">
                <div class="clear" onclick="">图案样式-复制</div>
                <div class="clear">
                    <input id="patterns" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="3"
                        data-slider-step="1" data-slider-value="0" />
                </div>
            </div>
            <div class="toolClass2">
                <div class="clear" onclick="shadow()">阴影</div>
                <div class="clear">
                    <input id="shadowX" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20"
                        data-slider-step="1" data-slider-value="0" />
                </div>
                <div class="clear">
                    <input id="shadowY" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20"
                        data-slider-step="1" data-slider-value="0" />
                </div>
                <div class="clear">
                    <input id="shadowColor" data-slider-id='ex1Slider' type="text" data-slider-min="100000"
                        data-slider-max="999999" data-slider-step="1" data-slider-value="100000" />
                </div>
            </div>
            <div class="toolClass2">
                <div class="clear" onclick="text()">文本</div>
                <div class="clear">
                    <input id="textFont" data-slider-id='ex1Slider' type="text" data-slider-min="5" data-slider-max="50"
                        data-slider-step="1" data-slider-value="0" />
                </div>
                <div class="clear">
                    <input id="textAlign" data-slider-id='ex1Slider' type="text" data-slider-min="0"
                        data-slider-max="4" data-slider-step="1" data-slider-value="0" />
                </div>
                <div class="clear">
                    <input id="textBaseline" data-slider-id='ex1Slider' type="text" data-slider-min="0"
                        data-slider-max="5" data-slider-step="1" data-slider-value="0" />
                </div>
                <div class="clear">
                    <input id="direction" data-slider-id='ex1Slider' type="text" data-slider-min="0"
                        data-slider-max="2" data-slider-step="1" data-slider-value="0" />
                </div>
            </div>
        </div>
        <div class="clearAll" onclick="clearRect(0, 0, 800, 600)">清除所有</div>
    </div>



    <script src="../../js/jquery.3.5.1.js"></script>
    <script src="../../js/bootstrap-slider.js"></script>
    <script>

        var ctx = getContext("myCanvsa")

        // 文本
        var slider = new Slider('#textFont', {
            formatter: function (value) {
                // 当前我们用来绘制文本的样式. 这个字符串使用和 CSS font 属性相同的语法. 默认的字体是 10px sans-serif。
                clearRect(0, 0, 800, 600)
                // ctx.font = "bold " + value + "px 宋体"
                ctx.font = "bold " + value + "px 宋体"
                text()
                return "文本大小:" + value;
            }
        });
        var slider = new Slider('#textAlign', {
            formatter: function (value) {
                const baselines = ['start', 'end', 'left', 'right', 'center'];
                clearRect(0, 0, 800, 600)
                ctx.textAlign = baselines[value]    
                text()
                return "水平对齐选项:" + baselines[value];
            }
        });
        var slider = new Slider('#textBaseline', {
            formatter: function (value) {
                const baselines = ['top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom'];
                clearRect(0, 0, 800, 600)
                ctx.textBaseline  = baselines[value]    
                text()
                return "垂直对齐选项:" + baselines[value];
            }
        });
        var slider = new Slider('#direction', {
            formatter: function (value) {
                const baselines = ['inherit', 'ltr', 'rtl'];
                clearRect(0, 0, 800, 600)
                ctx.direction  = baselines[value]    
                text()
                return "文本方向:" + baselines[value];
            }
        });
        function text() {
            // ctx.fillText(text, x, y [, maxWidth]);
            // text     使用当前的 font, textAlign, textBaseline 和 direction 值对文本进行渲染。
            // x    文本起点的 x 轴坐标。
            // y    文本起点的 y 轴坐标。
            //  maxWidth     绘制的最大宽度。如果指定了值，并且经过计算字符串的值比最大宽度还要宽，字体为了适应会水平缩放（如果通过水平缩放当前字体，可以进行有效的或者合理可读的处理）或者使用小号的字体。
            ctx.fillText("dfjeo", 155, 55)  // 在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.
            ctx.strokeText("这是一个文本，生气家啊", 30, 20)       // 在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的.
        }

        // 阴影
        var slider = new Slider('#shadowX', {
            formatter: function (value) {
                clearRect(0, 0, 800, 600)
                ctx.shadowOffsetX = value;
                shadow()
                return "X轴阴影:" + name;
            }
        });
        var slider = new Slider('#shadowY', {
            formatter: function (value) {
                clearRect(0, 0, 800, 600)
                ctx.shadowOffsetY = value;
                shadow()
                return "Y轴阴影:" + name;
            }
        });
        var slider = new Slider('#shadowColor', {
            formatter: function (value) {
                clearRect(0, 0, 800, 600)
                ctx.shadowColor = "#" + value;
                shadow()
                return "阴影颜色:" + name;
            }
        });
        function shadow() {
            ctx.fillRect(10, 10, 100, 100);
            ctx.fillText("dfjeo", 155, 55)
        }

        // 图案样式
        var img = new Image();
        img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
        var slider = new Slider('#patterns', {
            formatter: function (value) {
                let name = "no-repeat"
                value == 1 ? name = "no-repeat" : value == 2 ? name = "repeat-y" : value == 0 ? name = "repeat-x" : name = "repeat"
                clearRect(0, 0, 800, 600)
                var ptrn = ctx.createPattern(img, name);
                ctx.fillStyle = ptrn;
                ctx.fillRect(0, 0, 300, 150);
                return "图案样式:" + name;
            }
        });


        // 渐变-终点位置
        var slider = new Slider('#stop', {
            formatter: function (value) {
                gradients.offset || (gradients.offset = 1)
                clearRect(0, 0, 800, 600)
                gradients(value, gradients.offset)
                return "终点位置:" + value;
            }
        });

        // 渐变-偏移值
        var slider = new Slider('#offset', {
            formatter: function (value) {
                gradients.stop || (gradients.stop = 200)
                clearRect(0, 0, 800, 600)
                gradients(gradients.stop, value)
                return "偏移值:" + value;
            }
        });
        function gradients(stop, offset) {
            var gradient = ctx.createLinearGradient(0, 0, stop, 0);
            gradient.addColorStop(0, "green");
            gradient.addColorStop(offset, "yellow");
            ctx.fillStyle = gradient;
            ctx.fillRect(10, 10, 200, 100);
            ctx.strokeStyle = gradient;
            ctx.strokeRect(10, 115, 200, 130);
        }

        // 线段样式
        var slider = new Slider('#lineDash', {
            formatter: function (value) {
                let name = []
                value == 1 ? name = [10, 10] : value == 2 ? name = [15, 3, 3, 3] : value == 0 ? name = [] : name = [12, 3, 3]
                ctx.setLineDash(name)
                clearRect(0, 0, 800, 600)
                lineJoin()
                return ctx.getLineDash() + "," + "线段偏移量：" + ctx.lineDashOffset;
            }
        });
        function lineDash() {
            lineJoin()
        }

        // 线段折角类型
        var slider = new Slider('#lineJoin', {
            formatter: function (value) {
                // 设定线条与线条间接合处的样式。
                let name = "miter"
                value == 1 ? name = "miter" : value == 2 ? name = "round" : name = "bevel"
                // butt--通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。 圆角的半径是线段的宽度。
                // round--在相连部分的末端填充一个额外的以三角形为底的区域， 每个部分都有各自独立的矩形拐角。
                // square---通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。这个设置可以通过 miterLimit 属性看到效果。
                ctx.lineJoin = name
                clearRect(0, 0, 800, 600)
                lineJoin()
                return '线段末尾样式为: ' + name;
            }
        });

        function lineJoin() {
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.lineTo(200, 100);
            ctx.lineTo(220, 0);
            ctx.stroke();
        }

        // 线段宽度
        var slider = new Slider('#lineCap', {
            formatter: function (value) {
                let name = "butt"
                value == 1 ? name = "butt" : value == 2 ? name = "round" : name = "square"
                // butt--线段末端以方形结束。
                // round--线段末端以圆形结束。
                // square---线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。
                ctx.lineCap = name
                clearRect(0, 0, 800, 600)
                lineCap()
                return '线段末尾样式为: ' + name;
            }
        });
        function lineCap() {
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.lineTo(100, 100);
            ctx.stroke();
        }

        // 线段宽度
        var slider = new Slider('#width', {
            formatter: function (value) {
                ctx.lineWidth = value;
                clearRect(0, 0, 800, 600);
                width();
                return '线段宽度为: ' + value;
            }
        });

        function width() {
            ctx.beginPath();
            ctx.moveTo(20, 20);
            ctx.lineTo(130, 130);
            ctx.rect(40, 40, 70, 70);
            ctx.stroke();
        }

        // 透明度
        var slider = new Slider('#globalAlpha', {
            formatter: function (value) {
                // 数字在 0.0  （完全透明）和 1.0 （完全不透明）之间。 默认值是 1.0
                ctx.globalAlpha = value
                return '透明度为: ' + value;
            }
        });

        function globalAlpha() {
            // draw background
            ctx.fillStyle = '#FD0';
            ctx.fillRect(0, 0, 75, 75);
            ctx.fillStyle = '#6C0';
            ctx.fillRect(75, 0, 75, 75);
            ctx.fillStyle = '#09F';
            ctx.fillRect(0, 75, 75, 75);
            ctx.fillStyle = '#F30';
            ctx.fillRect(75, 75, 75, 75);
            ctx.fillStyle = '#FFF';

            // Draw semi transparent circles
            for (i = 0; i < 7; i++) {
                ctx.beginPath();
                ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
                ctx.fill();
            }

            // 画背景
            ctx.fillStyle = 'rgb(255,121,0)';
            ctx.fillRect(150, 0, 150, 37.5);
            ctx.fillStyle = 'rgb(102,104,0)';
            ctx.fillRect(150, 37.5, 150, 37.5);
            ctx.fillStyle = 'rgb(0,253,255)';
            ctx.fillRect(150, 75, 150, 37.5);
            ctx.fillStyle = 'rgb(255,151,0)';
            ctx.fillRect(150, 112.5, 150, 37.5);

            // 画半透明矩形
            for (var i = 0; i < 10; i++) {
                ctx.fillStyle = 'rgba(255,255,255,' + (i + 1) / 10 + ')';
                for (var j = 0; j < 4; j++) {
                    ctx.fillRect(150 + i * 14, 5 + j * 37.5, 14, 27.5)
                }
            }
        }

        // 画笔颜色
        var slider = new Slider('#ex2', {
            formatter: function (value) {
                ctx.strokeStyle = "#" + value       // 设置图形轮廓的颜色。
                // 对应的值 可以是表示 CSS 颜色值的字符串，渐变对象或者图案对象。我们迟些再回头探讨渐变和图案对象。默认情况下，线条和填充颜色都是黑色（CSS 颜色值 #000000）。
                return '颜色值为: #' + value;
            }
        });

        // 填充颜色
        var slider = new Slider('#ex1', {
            formatter: function (value) {
                ctx.fillStyle = "#" + value     // 设置图形的填充颜色。
                return '颜色值为: #' + value;
            }
        });

        function color2() {
            for (var i = 0; i < 6; i++) {
                for (var j = 0; j < 6; j++) {
                    ctx.strokeStyle = 'rgb(0,' + Math.floor(255 - 42.5 * i) + ',' +
                        Math.floor(255 - 42.5 * j) + ')';
                    ctx.beginPath();
                    ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
                    ctx.stroke();
                }
            }
        }

        function color() {
            for (var i = 0; i < 6; i++) {
                for (var j = 0; j < 6; j++) {
                    ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' +
                        Math.floor(255 - 42.5 * j) + ',0)';
                    ctx.fillRect(j * 25, i * 25, 25, 25);
                }
            }
        }

        // 使用Path2D
        function path2D_() {
            if (new Path2D()) {
                var pathRect = new Path2D();
                pathRect.moveTo(50, 50);
                pathRect.rect(50, 50, 75, 75);
                var pathRect2 = new Path2D();
                pathRect2.moveTo(50, 50);
                pathRect2.arc(150, 75, 25, 0, Math.PI * 2, true);
                ctx.stroke(pathRect)
                ctx.fill(pathRect2)
            } else {
                alert("该浏览器不支持")
            }
        }

        // 组合使用
        function zuhe() {
            roundedRect(ctx, 12, 12, 150, 150, 15);
            roundedRect(ctx, 19, 19, 150, 150, 9);
            roundedRect(ctx, 53, 53, 49, 33, 10);
            roundedRect(ctx, 53, 119, 49, 16, 6);
            roundedRect(ctx, 135, 53, 49, 33, 10);
            roundedRect(ctx, 135, 119, 25, 49, 10);

            ctx.beginPath();
            ctx.arc(37, 37, 13, Math.PI / 7, -Math.PI / 7, false);
            ctx.lineTo(31, 37);
            ctx.fill();

            for (var i = 0; i < 8; i++) {
                ctx.fillRect(51 + i * 16, 35, 4, 4);
            }

            for (i = 0; i < 6; i++) {
                ctx.fillRect(115, 51 + i * 16, 4, 4);
            }

            for (i = 0; i < 8; i++) {
                ctx.fillRect(51 + i * 16, 99, 4, 4);
            }

            ctx.beginPath();
            ctx.moveTo(83, 116);
            ctx.lineTo(83, 102);
            ctx.bezierCurveTo(83, 94, 89, 88, 97, 88);
            ctx.bezierCurveTo(105, 88, 111, 94, 111, 102);
            ctx.lineTo(111, 116);
            ctx.lineTo(106.333, 111.333);
            ctx.lineTo(101.666, 116);
            ctx.lineTo(97, 111.333);
            ctx.lineTo(92.333, 116);
            ctx.lineTo(87.666, 111.333);
            ctx.lineTo(83, 116);
            ctx.fill();

            ctx.fillStyle = "white";
            ctx.beginPath();
            ctx.moveTo(91, 96);
            ctx.bezierCurveTo(88, 96, 87, 99, 87, 101);
            ctx.bezierCurveTo(87, 103, 88, 106, 91, 106);
            ctx.bezierCurveTo(94, 106, 95, 103, 95, 101);
            ctx.bezierCurveTo(95, 99, 94, 96, 91, 96);
            ctx.moveTo(103, 96);
            ctx.bezierCurveTo(100, 96, 99, 99, 99, 101);
            ctx.bezierCurveTo(99, 103, 100, 106, 103, 106);
            ctx.bezierCurveTo(106, 106, 107, 103, 107, 101);
            ctx.bezierCurveTo(107, 99, 106, 96, 103, 96);
            ctx.fill();

            ctx.fillStyle = "black";
            ctx.beginPath();
            ctx.arc(101, 102, 2, 0, Math.PI * 2, true);
            ctx.fill();

            ctx.beginPath();
            ctx.arc(89, 102, 2, 0, Math.PI * 2, true);
            ctx.fill();
        }

        // 封装的一个用于绘制圆角矩形的函数.
        function roundedRect(ctx, x, y, width, height, radius) {
            ctx.beginPath();
            ctx.moveTo(x, y + radius);
            ctx.lineTo(x, y + height - radius);
            ctx.quadraticCurveTo(x, y + height, x + radius, y + height);
            ctx.lineTo(x + width - radius, y + height);
            ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);
            ctx.lineTo(x + width, y + radius);
            ctx.quadraticCurveTo(x + width, y, x + width - radius, y);
            ctx.lineTo(x + radius, y);
            ctx.quadraticCurveTo(x, y, x, y + radius);
            ctx.stroke();
        }

        function quadraticCurveTo() {
            // 二次贝塞尔曲线
            ctx.beginPath();
            ctx.moveTo(75, 25);
            ctx.quadraticCurveTo(22, 22, 25, 62.5);
            ctx.quadraticCurveTo(22, 97, 50, 100);
            ctx.quadraticCurveTo(50, 120, 30, 125);
            ctx.quadraticCurveTo(60, 120, 65, 100);
            ctx.quadraticCurveTo(128, 103, 125, 62.5);
            ctx.quadraticCurveTo(128, 22, 75, 25);
            ctx.stroke();
        }

        function bezierCurveTo() {
            // beginPath() 清空子路径列表开始一个新的路径。当你想创建一个新的路径时，调用此方法。
            ctx.beginPath();
            ctx.moveTo(50, 20);
            // 绘制三次贝塞尔曲线，
            ctx.bezierCurveTo(230, 30, 150, 60, 50, 100);
            // ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
            // cp1x-第一个控制点的 x 轴坐标。
            // cp1y-第一个控制点的 y 轴坐标。
            // cp2x-第二个控制点的 x 轴坐标。
            // cp2y-第二个控制点的 y 轴坐标
            // x-结束点的 x 轴坐标
            // y-结束点的 y 轴坐标。
            ctx.stroke();
        }

        function bezierCurveTo2() {
            //三次贝塞尔曲线
            ctx.beginPath();
            ctx.moveTo(75, 40);
            ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
            ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
            ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
            ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
            ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
            ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
            ctx.fill();
        }

        // 圆弧路径
        function arc1() {
            for (i = 0; i < 4; i++) {
                for (j = 0; j < 3; j++) {
                    ctx.beginPath();
                    var x = 25 + j * 30;               // 圆弧中心（圆心）的 x 轴坐标。
                    var y = 25 + i * 30;               // 圆弧中心（圆心）的 y 轴坐标。
                    var radius = 13;                    // 圆弧的半径。
                    var startAngle = 0;                     // 圆弧的起始点， x轴方向开始计算，单位以弧度表示。
                    var endAngle = Math.PI + (Math.PI * j) / 2; // 圆弧的终点， 单位以弧度表示。
                    var clockwise = i % 2 == 0 ? false : true; // 可选的Boolean值 ，如果为 true，逆时针绘制圆弧，反之，顺时针绘制。 

                    ctx.arc(x, y, radius, startAngle, endAngle, clockwise);

                    if (i > 1) {
                        ctx.fill();
                    } else {
                        ctx.stroke();
                    }
                }
            }
        }

        // 画个笑脸
        function arc2() {
            ctx.beginPath();
            // arc()函数中表示角的单位是弧度，不是角度。角度与弧度的js表达式:
            //      弧度=(Math.PI/180)*角度。
            ctx.arc(75, 75, 50, 5, Math.PI * 2, true); // 绘制
            ctx.moveTo(110, 75);
            ctx.arc(75, 75, 35, 0, Math.PI, false);   // 口(顺时针)
            ctx.moveTo(65, 65);
            ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // 左眼
            ctx.moveTo(95, 65);
            ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // 右眼
            ctx.stroke();
        }

        // 清除指定矩形区域，让清除部分完全透明。
        function clearRect(x, y, width, height) {
            ctx.clearRect(x, y, width, height)
        }

        // 绘制一个填充的矩形
        function fillRect(x, y, width, height) {
            ctx.fillRect(x, y, width, height)
        }

        // 绘制一个矩形的边框
        function strokeRect(x, y, width, height) {
            ctx.strokeRect(x, y, width, height)
        }


        // 得到canvas上下文
        function getContext(id) {
            let element
            if ((id.indexOf("#") == -1 ? element = $("#" + id) : element = $(id)) && element.length !== 0) {
                return !element.get(0).getContext || element.get(0).getContext("2d") || {}  // getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 
            }
        }

    </script>
</body>

</html>